<template name="AssessScoresBar">
	<view class="qiun-charts">
		<canvas canvas-id="canvasColumn" id="canvasColumn" class="charts"></canvas>
		
		<view style="margin-left: 40rpx;">
			<view class="item">
				<view style="background-color: #A3F680;" class="item-color"></view>
				<text class="item-name">超常</text>
				<text>130分及130分以上</text>
			</view>
			<view class="item">
				<view style="background-color: #DDFD30;" class="item-color"></view>
				<text class="item-name">优秀</text>
				<text>115分——129分</text>
			</view>
			<view class="item">
				<view style="background-color: #FFFF00;" class="item-color"></view>
				<text class="item-name">正常</text>
				<text>85分——114分</text>
			</view>
			<view class="item">
				<view style="background-color: #FFAB00;" class="item-color"></view>
				<text class="item-name">落后</text>
				<text>70分——84分</text>
			</view>
			<view class="item">
				<view style="background-color: #FF8E00;" class="item-color"></view>
				<text class="item-name">偏低</text>
				<text>69分——69分以下</text>
			</view>
		</view>
	</view>
</template>

<script>
	import uCharts from '../js_sdk/u-charts/u-charts/u-charts.js'
	
	var _self;
	var canvaColumn = null;
	
	export default {
		name:"AssessScoresBar",
		
		props:{
			dimensionScores:{
				type: Array,
				default () {
					return []
				}
			},
		},
		
		data() {
			return {
				cWidth: '',
				cHeight: '',
				pixelRatio: 1,
				serverData: '',
				
				assessLevel: [
					{
						title: "偏低",
						scores: 70,
						colorScores: 69,
					},
					{
						title: "落后",
						scores: 15,
						colorScores: 84,
					},
					{
						title: "正常",
						scores: 30,
						colorScores: 114,
					},
					{
						title: "优秀",
						scores: 15,
						colorScores: 129,
					},
					{
						title: "超常",
						scores: 20,
						colorScores: 149,
					},
				]
			};
		},
		
		created() {
			console.log('created');
			_self = this;
			this.cWidth = uni.upx2px(680);
			this.cHeight = uni.upx2px(500);
			this.initData();

		},
		
		updated(){
			this.initData();
		},
		
		methods:{
			initData(){
				let Column = {
					categories: [],
					series: []
				};
				var total=0;
				Column.categories[0]='发展能区';
				for (var levevIndex in this.assessLevel) {
					var assess = this.assessLevel[levevIndex];
					
					var series = {
						data: [],
					}
					series.data[0]=assess.scores;
					series.color=this.getAssessColor(assess.colorScores);
					for (var index=0; index<this.$props.dimensionScores.length-1; index++) {
						var item = this.$props.dimensionScores[index];
						var i=index+1;
						Column.categories[i]=item.dimensionName;
						
						if (assess.scores===70){
							total+=item.dqFraction;
						}
						series.data[i]=0;
					}
					series.data[6]=0;
					Column.series[levevIndex]=series;
				}
				for (index=0; index<this.$props.dimensionScores.length-1; index++) {
					var item = this.$props.dimensionScores[index];
					var i=index+1;
					var colorIndex=this.getAssessColorIndex(item.dqFraction);
					Column.series[colorIndex].data[i]=item.dqFraction;
				}
				
				Column.categories[6]='综合评价';
				var avg=total/5;
				var colorIndex=this.getAssessColorIndex(avg);
				Column.series[colorIndex].data[6]=avg;
				_self.showColumn("canvasColumn", Column);
			},
			
			showColumn(canvasId, chartData) {
				canvaColumn = new uCharts({
					$this: _self,
					canvasId: canvasId,
					type: 'column',
					legend: {
						show: false
					},
					fontSize: 9,
					background: '#FFFFFF',
					pixelRatio: _self.pixelRatio,
					animation: true,
					categories: chartData.categories,
					series: chartData.series,
					xAxis: {
						disableGrid: true,
					},
					yAxis: {
						disabled:false
					},
					dataLabel: false,
					width: _self.cWidth * _self.pixelRatio,
					height: _self.cHeight * _self.pixelRatio,
					extra: {
						column: {
							type: 'stack',
							width: _self.cWidth * _self.pixelRatio * 0.45 / chartData.categories.length
						}
					}
				});
			},
			
			getAssessColorIndex(score){
				if (score<70){
					return 0;
				}else if (score>=70&&score<85){
					return 1;
				}else if (score>=85&&score<115){
					return 2;
				}else if (score>=115&&score<130){
					return 3;
				}else{
					return 4;
				}
			},
			
			getAssessColor(score){
				if (score<70){
					return '#FF8E00';
				}else if (score>=70&&score<85){
					return '#FFAB00';
				}else if (score>=85&&score<115){
					return '#FFFF00';
				}else if (score>=115&&score<130){
					return '#DDFD30';
				}else{
					return '#A3F680';
				}
			}
		}
	}
</script>

<style>
	.qiun-charts {
		margin: 30rpx;
		height: 680upx;
		background-color: #FFFFFF;
		border-radius: 20rpx;
	}

	.charts {
		width: 100%;
		height: 500upx;
		background-color: #FFFFFF;
		border-radius: 20rpx;
	}
	
	.item{
		display: flex;
		flex-direction: row;
		color: #50576a;
		font-size: 24rpx;
		align-items: center;
		margin-top: 5rpx;
	}
	
	.item-color{
		width: 30rpx;
		height: 30rpx;
	}
	
	.item-name{
		margin-left: 10rpx;
		margin-right: 20rpx;
	}
</style>
